<template>
  <div>
    <el-card class="box-card">
      <!--      Header-->
      <div>
        <el-col :span="18">
          <el-row>
            <el-col :span="9">
              目录名称
              <el-input v-model="inputKey" class="input"></el-input>
            </el-col>
            <el-col :span="15">
              状态
              <el-select v-model="value" class="input" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-button @click="clearInput">清除</el-button>
              <el-button type="primary" @click="searchDirectorys"
              >搜索
              </el-button
              >
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row justify="end" type="flex">
            <el-button v-if="this.$route.query.id" type="text" @click="goBack"
            >← 返回学科
            </el-button
            >
            <el-button icon="el-icon-edit" type="success" @click="addDirectory"
            >新增目录
            </el-button
            >
          </el-row>
        </el-col>
      </div>
      <!--      提示消息-->
      <Alert :total="total"/>
      <!--      表格-->
      <el-table
        :data="directoryList"
        :header-cell-style="headClass"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column
          label="目录名称"
          prop="directoryName"
        ></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期" prop="addDate">
          <template v-slot="{ row }">{{
              row.addDate | parseTimeByString
            }}
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals"></el-table-column>
        <el-table-column label="状态" prop="state">
          <template v-slot="{ row }">{{ row.state | showState }}</template>
        </el-table-column>
        <el-table-column label="操作" prop="address" width="250px">
          <template v-slot="{ row }">
            <!--         {{row}}-->
            <el-button type="text" @click="changeState(row)">
              <span v-if="row.state === 0">启用</span>
              <span v-else>禁用</span>
            </el-button>
            <el-button
              :disabled="row.state === 1 ? true : false"
              type="text"
              @click="editDirectory(row)"
            >修改
            </el-button
            >
            <el-button
              :disabled="
                row.state === 1 ? true : row.totals !== 0 ? true : false
              "
              type="text"
              @click="delDirectory(row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页-->
      <el-row justify="end" type="flex">
        <el-pagination
          :current-page="page"
          :page-size="pagesize"
          :page-sizes="[10, 15, 20, 25]"
          :total="total"
          background
          layout="sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!--  新增目录和修改目录的弹层-->
    <el-dialog
      :title="`${changeText}目录`"
      :visible.sync="directoryDialog"
      width="400px"
      @close="btnCancel"
    >
      <el-form
        ref="directoryRef"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item v-if="!$route.query.id" label="所属学科">
          <el-select v-model="form.subjectID" placeholder="请选择">
            <el-option
              v-for="item in form.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >{{ item.label }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            v-model="form.directoryName"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Alert from '@/components/Alert'
import { simpleSub } from '@/api/hmmm/subjects'
import { add, changeState, list, remove, update } from '@/api/hmmm/directorys'

export default {
  components: {
    Alert
  },
  filters: {
    showState (state) {
      return state === 1 ? '已启用' : '已禁用'
    }
  },
  data () {
    return {
      form: {
        subjectID: '',
        directoryName: null,
        id: null,
        subjectName: '',
        options: [
          {
            label: '',
            value: ''
          }
        ]
      },
      rules: {
        directoryName: [
          {
            required: true,
            message: '请输入目录名称',
            trigger: 'blur'
          }
        ]
      },
      directoryDialog: false,
      formLabelWidth: '120px',
      page: 1, // 当前页
      pagesize: 10, // 每页条数
      total: 1, // 数据总数
      inputKey: null,
      directoryList: [
        {
          subjectID: '',
          directoryName: '',
          username: '',
          addDate: '',
          totals: '',
          state: ''
        }
      ],
      options: [
        {
          value: '1',
          label: '启用'
        },
        {
          value: '0',
          label: '禁用'
        }
      ],
      value: null
    }
  },
  computed: {
    isEdit () {
      return !!this.form.id
    },
    changeText () {
      return this.isEdit ? '修改' : '新增'
    }
  },
  created () {
    this.getDirectoryList()
  },
  // updated () {
  //   this.getDirectoryList()
  // },
  watch: {
    $route () {
      this.getDirectoryList()
    }
  },
  methods: {
    // 监听每页多少条
    handleSizeChange (val) {
      this.pagesize = val
      this.getDirectoryList()
    },
    // 监听页码值改变
    handleCurrentChange (val) {
      this.page = val
      this.getDirectoryList()
    },
    headClass () {
      return 'background:#fafafa; height:50px; border-bottom:2px solid #E8E8EA'
    },
    // 获取列表
    async getDirectoryList () {
      // 如果路由传的参数有id
      if (this.$route.query.id) {
        const { data } = await list({
          page: this.page,
          pagesize: this.pagesize,
          // subjectName: this.$route.query.name,
          subjectID: this.$route.query.id
        })
        console.log(data.items)
        this.page = parseInt(data.page)
        this.pagesize = parseInt(data.pagesize)
        this.total = data.counts
        this.directoryList = data.items
      } else {
        // 正常渲染
        const { data } = await list({
          page: this.page,
          pagesize: this.pagesize,
          directoryName: this.inputKey,
          state: this.value
        })
        console.log(data)
        this.page = parseInt(data.page)
        this.pagesize = parseInt(data.pagesize)
        this.total = data.counts
        this.directoryList = data.items
      }
    },
    // 搜索
    async searchDirectorys () {
      await this.getDirectoryList()
      console.log(this.value)
    },
    // 清除
    async clearInput () {
      if (this.inputKey === '' && this.value === '') {
        return
      }
      this.inputKey = ''
      this.value = ''
      await this.getDirectoryList()
    },
    //  删除
    async delDirectory (row) {
      try {
        await this.$confirm('您确定删除该目录吗', '提示', { type: 'warning' })
        await remove(row)
        await this.getDirectoryList()
        this.$message.success('删除成功')
      } catch (e) {
        this.$message.error('删除失败')
      }
    },
    //  返回上一页
    goBack () {
      this.$router.go(-1)
    },
    // 改变状态
    async changeState (row) {
      // console.log(row.state)
      // row.state = Number(!row.state)
      const res = await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      console.log(res) // true
      await this.getDirectoryList()
    },
    // 添加
    async addDirectory () {
      this.directoryDialog = true
      const { data } = await simpleSub()
      console.log(data)
      this.form.options = data
    },
    // 编辑
    editDirectory (row) {
      this.directoryDialog = true
      this.form.directoryName = row.directoryName
      this.form.id = row.id
      this.form.subjectName = row.subjectName
      this.form.subjectID = row.subjectID
    },
    // 点击确定触发
    async btnOk () {
      await this.$refs.directoryRef.validate()
      if (this.isEdit) {
        //  编辑
        await update(this.form)
      } else {
        // 添加
        if (this.$route.query.id) {
          await add({
            subjectID: parseInt(this.$route.query.id),
            directoryName: this.form.directoryName
          })
        } else {
          await add(this.form)
        }
      }
      await this.getDirectoryList()
      this.$message.success(`${this.changeText}成功`)
      this.btnCancel()
    },
    btnCancel () {
      this.directoryDialog = false
      this.$refs.directoryRef.resetFields()
      this.form = {
        subjectID: '',
        directoryName: '',
        id: '',
        subjectName: '',
        options: [
          {
            label: '',
            value: ''
          }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-input__inner {
  display: inline-block;
  width: 200px;
}
</style>
